<template>
  <vue-form :state="formstate" ref="form" class="form">
    <div v-if="status">通道状态：<span class="tip">{{ status_info }}</span></div>
    <div v-if="status">失败信息：<span class="err">{{ error_info }}</span></div>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>蓝海行动</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" @touchstart.stop.prevent="handleChangeIsBlue" v-model="lanhai_name" readonly type="text" required name="lanhai_name" placeholder="请选择是否参加蓝海行动"/>
        </div>
      </div>
      <field-messages name="lanhai_name" show="$touched">
        <div slot="required" class="err">蓝海行动必须选择~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>联系地址</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" @touchstart.stop.prevent="handleSelectAddress" v-model="address_name" readonly type="text" required name="address_name" placeholder="请选择省市区"/>
        </div>
      </div>
      <field-messages name="address_name" show="$touched">
        <div slot="required" class="err">联系地址必须选择~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>详细地址</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.address" type="text" required name="address" placeholder="具体精确到门牌号"/>
        </div>
      </div>
      <field-messages name="address" show="$touched">
        <div slot="required" class="err">详细地址必须填写~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>经营类别</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" @focus.stop.prevent="handleChangeIndustry" v-model="industry_name" readonly type="text" required name="industry_name" placeholder="请选择经营类别"/>
        </div>
      </div>
      <field-messages name="industry_name" show="$touched">
        <div slot="required" class="err">经营类别必须选择~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>渠道选择</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.balance_type" readonly type="text" required name="balance_type" placeholder="请选择渠道"/>
        </div>
      </div>
      <field-messages name="balance_type" show="$touched">
        <div slot="required" class="err">渠道必须选择~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item phone">
      <div class="weui-cells__title"><span class="err">*</span>短信验证</div>
      <div class="weui-cell" style="margin-bottom: 10px;">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="phone" readonly disabled type="number"/>
        </div>
      </div>
      <button class="btn" v-if="show" @touchstart.stop.prevent="handleSendMes">发送验证码</button>
      <button class="btn weui-btn_disabled" disabled v-else>{{ count }}s重新获取</button>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.code" type="number" required name="code" placeholder="请输入验证码"/>
        </div>
      </div>
      <field-messages name="code" show="$touched">
        <div slot="required" class="err">渠道必须选择~</div>
        <div slot="number" class="err">验证码格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validRata': validRata }">
      <div class="weui-cells__title"><span class="err">*</span>微信费率</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" required type="text" v-model.number="model.wx_rate" name="wx_rate" placeholder=""/>
        </div>
      </div>
      <field-messages name="wx_rate" show="$touched">
        <div slot="required" class="err">微信费率必须填写~</div>
        <div slot="number" class="err">微信费率格式错误~</div>
        <div slot="validRata" class="err">微信费率格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validRata': validRata }">
      <div class="weui-cells__title"><span class="err">*</span>支付宝费率</div>
      <div class="weui-cell" :class="model.is_blue ? 'weui-input_disabled' : ''">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model.number="model.ali_rate" :disabled="model.is_blue" type="number" required name="ali_rate" placeholder=""/>
        </div>
      </div>
      <field-messages name="ali_rate" show="$touched">
        <div slot="required" class="err">支付宝费率必须填写~</div>
        <div slot="number" class="err">支付宝费率格式错误~</div>
        <div slot="validRata" class="err">支付宝费率格式错误~</div>
      </field-messages>
    </validate>
    <div class="pb20 pt40">
      <button class="weui-btn weui-btn_primary" @touchstart.stop.prevent="handleClickSubmit">提交审核</button>
    </div>
  </vue-form>
</template>

<script>
import { address } from '@/utils/address'
import { areaAddress } from '@/api/index'
import { merchanenlChannelWsCategory, merchanenlChannelWsIsBlue, merchanenlChannelPhone, merchanenlChannelWsMsg, merchanenlChannelWsUpdate, merchantWsGetInfo } from '@/api/salesman'

export default {
  name: 'addChannel',
  data() {
    return {
      show: true,
      edit: true,
      status: false,
      count: null,
      status_info: null,
      error_info: null,
      formstate: {},
      address: [],
      options: [],
      address_name: '',
      industry_name: '',
      lanhai_name: '参加',
      phone: '',
      lanhai: [
        { value: true, label: '参加' },
        { value: false, label: '不参加' }
      ],
      model: {
        area: [],
        address: '',
        industry: '',
        is_blue: true,
        balance_type: 'd1',
        code: '',
        wx_rate: '',
        ali_rate: 0
      }
    }
  },
  methods: {
    handleSelectAddress() {
      if (this.address.length === 0) {
        this.$weui.alert('请刷新获取地区数据')
        return false
      }
      address(this.address).then(res => {
        this.model.area = res.value
        this.address_name = res.label
      }).catch(err => {
        this.$weui.alert(err)
      })
    },
    handleChangeIsBlue() {
      const _this = this
      this.$weui.picker(_this.lanhai, {
        onConfirm(ret) {
          _this.model.is_blue = ret[0].value
          _this.lanhai_name = ret[0].label
          merchanenlChannelWsIsBlue(_this.$route.query.merchant_num, ret[0].value).then(res => {
            if (res.data.errorCode === 0) {
              _this.model.area = res.data.result.area.code
              _this.address_name = res.data.result.area.name
              _this.model.address = res.data.result.address
              _this.model.industry = res.data.result.industry.code
              _this.industry_name = res.data.result.industry.name
              _this.model.is_blue = res.data.result.is_blue
              this.status_info = res.data.result.enter_status.name
              this.error_info = res.data.result.enter_status.error_info
              res.data.result.is_blue ?  _this.lanhai_name = '参加' : _this.lanhai_name = '未参加'
              _this.model.balance_type = res.data.result.balance_type
              _this.model.ali_rate = Number(res.data.result.ali_rate)
              _this.model.wx_rate = Number(res.data.result.wx_rate)
            } else {
              _this.$refs.form.reset()
              if (ret[0].value) {
                _this.model.ali_rate = 0
              } else {
                _this.model.ali_rate = null
              }
            }
          })
        }
      })
    },
    handleChangeIndustry() {
      const _this = this
      this.$weui.picker(_this.options, {
        onChange(res) {
          _this.model.industry = res[0].value
          _this.industry_name = res[0].label
        }
      })
    },
    handleSendMes() {
      const TIME_COUNT = 60
      merchanenlChannelWsMsg(this.$route.query.merchant_num).then(response => {
        if (response.data.errorCode === 0) {
          this.$toast.success(response.data.errorMsg)
          if (!this.timer) {
            this.count = TIME_COUNT
            this.show = false
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
              } else {
                this.show = true
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
        } else {
          this.$weui.alert(response.data.errorMsg)
        }
      })
    },
    validRata(v) {
      if (v.length > 5) {
        return false
      } else {
        return true
      }
    },
    handleClickSubmit(e) {
      e.preventDefault();
      if (!this.formstate.$invalid) {
        this.$loading(true, '正在提交')
        merchanenlChannelWsUpdate(this.$route.query.merchant_num, this.model).then(res => {
          if (res.data.errorCode === 0) {
            this.$loading(false)
            this.$router.push({ name: 'channelSucc' })
          } else {
            this.$loading(false)
            this.$weui.alert(res.data.errorMsg)
          }
        })
      } else {
        this.$weui.alert('请完成资料填写')
      }
    }
  },
  created() {
    if (this.$route.query.status === -100 || this.$route.query.status === -200 || this.$route.query.status === -110 || this.$route.query.status === 313 || this.$route.query.status === 913) {
      this.status = true
      merchantWsGetInfo(this.$route.query.merchant_num).then(res => {
        if (res.data.errorCode === 0) {
          this.model.area = res.data.result.area.code
          this.address_name = res.data.result.area.name
          this.model.address = res.data.result.address
          this.model.industry = res.data.result.industry.code
          this.industry_name = res.data.result.industry.name
          this.model.is_blue = res.data.result.is_blue
          this.status_info = res.data.result.enter_status.name
          this.error_info = res.data.result.enter_status.error_info
          res.data.result.is_blue ?  this.lanhai_name = '参加' : this.lanhai_name = '未参加'
          this.model.balance_type = res.data.result.balance_type
          this.model.ali_rate = Number(res.data.result.ali_rate)
          this.model.wx_rate = Number(res.data.result.wx_rate)
        } else {
          this.$weui.alert(res.data.errorMsg)
        }
      })
    }
    areaAddress().then(res => {
      if (res.data.errorCode === 0) {
        this.address = res.data.result
      } else {
        this.$weui.alert('地区数据加载失败，请刷新重试！')
      }
    })
    merchanenlChannelWsCategory().then(res => {
      if (res.data.errorCode === 0) {
        this.options = res.data.result
      } else {
        this.$message.error(res.data.errorMsg)
      }
    })
    merchanenlChannelPhone(this.$route.query.merchant_num).then(res => {
      if (res.data.errorCode === 0) {
        this.phone = res.data.result
      } else {
        this.$weui.alert('手机号码获取失败')
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/index.scss';
  .form {
    padding: px2rem(30px);
    .btn {
      width: px2rem(200px);
      margin-left: px2rem(30px);
      height: px2rem(88px);
      background: rgba(255,174,0,1);
      color: #fff;
      border-radius: 4px;
      float: right;
      border: unset;
      outline: none;
    }
    .phone {
      .weui-cell {
        padding-bottom: px2rem(20px);
      }
    }
    .weui-input_disabled {
      background: #F7F7F7;
    }
  }
</style>
